<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		.logo-svg circle,
		.logo-svg path {
			stroke-dasharray: 500;
			stroke-dashoffset: 500
		}
		
		.logo-svg {
			position: absolute;
			left: 50%;
			top: 50%;
			-webkit-transform: translate(-50%, -50%) scale(.9);
			transform: translate(-50%, -50%) scale(.9);
			width: 350px;
			height: 350px
		}
		
		.logo-svg.switch {
			opacity: 0
		}
		
		.logo-svg path {
			stroke-linecap: round;
			stroke-linejoin: round;
			-webkit-animation: dash 6s linear forwards;
			animation: dash 6s linear forwards
		}
		
		.logo-svg circle {
			-webkit-animation: dash 2s linear forwards;
			animation: dash 2s linear forwards
		}
		
		@-webkit-keyframes dash {
			to {
				stroke-dashoffset: 0
			}
		}
		
		@keyframes dash {
			to {
				stroke-dashoffset: 0
			}
		}
	</style>

	<body>
		<svg class="logo-svg" width="350" height="350">
			<g class="svg-c">
				<path d="M2 60 L2 2 L60 2 " stroke-width="4" fill="transparent" stroke="#000" />
			</g>
			<g class="svg-h">
				<path d="M2 350 L2 290" stroke-width="4" fill="transparent" stroke="#000" />
				<path d="M0 350 L60 295 L60 330" stroke-width="4" fill="transparent" stroke="#000" />
				<path d="M0 348 L45 348" stroke-width="4" fill="transparent" stroke="#000" />
			</g>
			<g class="svg-e">
				<path d="M290 59 L290 2 L345 2" stroke-width="4" fill="transparent" stroke="#000" />
				<path d="M345 2 L290 60 L335 60" stroke-width="4" fill="transparent" stroke="#000" />
			</g>
			<g class="svg-n">
				<path d="M348 290 L348 348 L290 348" stroke-width="4" fill="transparent" stroke="#000" />
			</g>
			<g class="svg-camera">
				<circle cx="175" cy="175" r="55" fill="transparent" stroke-width="4" stroke="#000" />
			</g>
		</svg>
	</body>

</html>